<!--菜单权限管理-->
<template>
    <!-- 创建表单-->
    <div class="manage">
        <el-dialog :title="operateType === 'add' ? '新增权限' : '更新权限'" :visible.sync="isShow">
            <template>
                <el-form :inline="false" :model="operateForm" :rules="operateRules" ref="operateForm"
                         label-width="100px">
                    <el-form-item key="label" label="名称" prop="label">
                        <el-input v-model="operateForm.label" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item key="routerCode" label="路由编码" prop="routerCode">
                        <el-input v-model="operateForm.routerCode" placeholder="请输入路由编码"></el-input>
                    </el-form-item>
                    <el-form-item key="icon" label="图标" prop="icon">
                        <el-input v-model="operateForm.icon" placeholder="请输入图标"></el-input>
                    </el-form-item>
                    <el-form-item key="routerPath" label="路由" prop="path">
                        <el-input v-model="operateForm.routerPath" placeholder="请输入路由"></el-input>
                    </el-form-item>
                    <el-form-item key="fileUrl" label="文件地址" prop="url">
                        <el-input v-model="operateForm.fileUrl" placeholder="请输入文件地址"></el-input>
                    </el-form-item>
                    <el-form-item key="orderNum" label="排序" prop="orderNum">
                        <el-input-number v-model="operateForm.orderNum" @change="handleChange" :min="1" :max="100"
                                         label="排序">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item key="selectData" label="上级" prop="selectData">
                        <tree-select :height="400"
                                     :width="400"
                                     size="small"
                                     :data="treeData"
                                     :defaultProps="defaultProps"
                                     :nodeKey="nodeKey"
                                     :checkedKeys="defaultCheckedKeys"
                                     clearable
                                     collapseTags
                                     checkStrictly ref="tree">
                        </tree-select>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="operateForm.type" size="medium">
                            <el-radio border label="1">文件夹</el-radio>
                            <el-radio border label="2">菜单</el-radio>
                            <!--<el-radio border label="3">按钮</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </template>
            <!--permission-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="confirm('operateForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="按钮权限" :visible.sync="isShowBtn">
            <template>
                <el-form ref="btnForm" :model="btnForm" label-width="80px" size="mini">
                    <el-form-item label="支持操作">
                        <el-checkbox-group v-model="btnForm.btnPerms">
                            <el-checkbox-button label="save" name="btnPerms">新增</el-checkbox-button>
                            <el-checkbox-button label="edit" name="btnPerms">编辑</el-checkbox-button>
                            <el-checkbox-button label="delete" name="btnPerms">删除</el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShowBtn = false">取 消</el-button>
                <el-button type="primary" @click="confirmAddPerms()">确 定</el-button>
            </div>
        </el-dialog>
        <div class="manage-header">
            <!-- 查询和新增-->
            <el-button type="primary" @click="addPermission()">+ 新增</el-button>
            <template>
                <el-form :inline="true" :model="searchFrom" ref="searchFrom" label-width="100px">
                    <el-form-item key="keyword" label="权限名称/标识">
                        <el-input v-model="searchFrom.keyword" placeholder="请输入权限名称/标识"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getTreeData(searchFrom.keyword)">搜索</el-button>
                    </el-form-item>
                </el-form>
            </template>

        </div>
        <!-- 数据列表 -->
        <el-table
                :data="treeData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children'}">
            <el-table-column show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label"
                             :width="item.width ? item.width : 125">
                <template slot-scope="scope">
                    <span>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" min-width="180">
                <template slot-scope="scope">
                    <el-button type="primary" v-per="'edit'" icon="el-icon-edit" @click="editPermission(scope.row)" circle></el-button>
                    <el-button type="danger" v-per="'delete'" icon="el-icon-delete" @click="delPermission(scope.row)" circle></el-button>
                    <el-button type="primary" v-per="'save'" icon="el-icon-plus" @click="editBtnPerms(scope.row)" circle></el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>


</template>

<script>
    import TreeSelect from '../../components/TreeSelect.vue';

    import store from "@/store";

    export default {
        components: {
            TreeSelect
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        name: "permission",
        data() {
            return {
                nodeKey: 'id',
                defaultCheckedKeys: [],
                defaultProps: {
                    parent: 'parentId',   // 父级唯一标识
                    value: 'id',          // 唯一标识
                    label: 'label',       // 标签显示
                    children: 'children', // 子级
                },
                operateType: 'add',
                isShow: false,
                isShowBtn: false,
                treeClickCount: 0,
                tableData: [],
                treeData: [],
                tableLabel: [
                    {
                        prop: 'label',
                        label: '名称',
                        width: 200
                    },
                    {
                        prop: 'routerCode',
                        label: '路由编码',
                        width: 200
                    },
                    {
                        prop: 'icon',
                        label: '图标',
                        width: 120
                    },
                    {
                        prop: 'routerPath',
                        label: '路由',
                        width: 200
                    },
                    {
                        prop: 'fileUrl',
                        label: '文件地址',
                        width: 200
                    },
                    {
                        prop: 'updateTime',
                        label: '更新时间',
                        width: 200
                    }
                ],
                operateForm: {
                    routerCode: '',
                    icon: '',
                    routerPath: '',
                    label: '',
                    fileUrl: '',
                    orderNum: 1,
                    parentId: '',
                    type: ''
                },
                btnForm: {
                    btnPerms: [],
                    parentId: ''
                },
                operateRules: {

                    icon: [
                        {required: true, message: '请输入图标', trigger: 'blur'},
                        {max: 30, message: '图标长度不能超过10个字符', trigger: 'blur'}
                    ],
                    label: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {max: 20, message: '名称长度不能超过20个字符', trigger: 'blur'}
                    ]

                },
                searchFrom: {
                    keyword: ''
                },
                config: {
                    page: 1,
                    total: 30,
                    loading: false
                },
            }
        },
        methods: {
            getTreeData(keyword = '') {
                this.config.loading = true
                let token = this.getToken();
                this.$http
                    .get('http://localhost:8001/api/manager/permission/listPermissionTree', {
                        params: {
                            keyword
                        },
                        headers: {
                            "token": token
                        }
                    })
                    .then(res => {
                        this.treeData = res.data
                    })
            },
            getToken() {
                store.commit('getToken')
                let token = store.state.user.token
                return token;
            },
            addPermission() {
                this.operateForm = {}
                this.operateType = 'add'
                this.isShow = true
            },
            editPermission(row) {
                this.operateType = 'edit'
                this.isShow = true
                if (row.parentId) {
                    this.defaultCheckedKeys = [row.parentId];
                }
                this.operateForm = row
            },
            confirm(form) {
                let selectedData = this.$refs.tree.selectedData;
                this.operateForm.parentId = selectedData;
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        store.commit('getToken')
                        let token = store.state.user.token
                        if (this.operateType === 'edit') {
                            console.log(this.operateForm)
                            this.$http.post('http://localhost:8001/api/manager/permission/edit', this.operateForm, {
                                headers: {
                                    "token": token
                                }
                            }).then(res => {
                                console.log(res.data)
                                this.isShow = false
                                this.getTreeData()
                            })
                        } else {
                            this.$http.post('http://localhost:8001/api/manager/permission/save', this.operateForm, {
                                headers: {
                                    "token": token
                                }
                            }).then(res => {
                                console.log(res.data)
                                this.isShow = false
                                this.getTreeData()
                            })
                        }
                    }
                });

            },
            delPermission(row) {
                let token = this.getToken();
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        let id = row.id
                        this.$http
                            .delete('http://localhost:8001/api/manager/permission/delete/' + id, {
                                headers: {
                                    token: token
                                }
                            })
                            .then(res => {
                                console.log(res.data)
                                this.$message({
                                    type: 'success',
                                    message: res.data.message
                                })
                                this.getTreeData()
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },
            handleChange(value) {
                console.log(value);
            },
            editBtnPerms(row) {
                this.isShowBtn = true;
                if (row.btnPerms) {
                    this.btnForm.btnPerms = row.btnPerms;
                } else {
                    this.btnForm.btnPerms = [];
                }
                this.btnForm.parentId = row.id;
            },
            confirmAddPerms() {
                console.log(this.btnForm)
                store.commit('getToken')
                let token = store.state.user.token
                this.$http.post('http://localhost:8001/api/manager/permission/editBtnPerms', this.btnForm, {
                    headers: {
                        "token": token
                    }
                }).then(res => {
                    res = res.data;
                    if (res.code === 20000) {
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                        this.isShowBtn = false;
                        this.getTreeData()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message
                        })
                    }
                })
            }
        },
        created() {
            this.getTreeData();
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/scss/common';
</style>
